<html>
<head>
<title>js拓扑图-vis插件</title>
<link href="js/vis.min.css" rel="stylesheet">
<style type="text/css">
    .m-mynetwork {width: 600px;height: 400px;border: 1px solid lightgray;}
</style>
</head>
<body>
<div id="mynetwork" class="m-mynetwork"></div>
<script src="js/jquery.js"></script>
<script src="js/vis.min.js"></script>
<script type="text/javascript">
var dataDemo = {
	"nodes": [:wq
		{
			"os": "linux",
			"group": "island_monkey_linux",
			"id": "5b08001853c3aef2788d7183",
			"dead": true,
			"label": "10.10.10.144"
		}, {
			"os": "linux",
			"group": "island_monkey_linux",
			"id": "5b08007453c3aef2788d7bc9",
			"dead": true,
			"label": "10.10.10.147"
		}, {
			"os": "linux",
			"group": "monkey_linux",
			"id": "5b0800b253c3aef2788d84f5",
			"dead": true,
			"label": "10.10.10.158"
		}
	],
	"edges": [{
		"to": "5b08007453c3aef2788d7bc9",
		"from": "5b08001853c3aef2788d7183",
		"id": "5b08004ae138230001dc670b",
		"group": "exploited"
	}, {
		"to": "5b0800b253c3aef2788d84f5",
		"from": "5b08001853c3aef2788d7183",
		"id": "5b08008ae138230001dc6718",
		"group": "exploited"
	}]
};	
</script>
<script>
$(function () {
    var myAction = {}, network;
    var dom = {
        container: document.getElementById('mynetwork')
    };

    $.extend(myAction, {
        initVis: function () {
            var nodes = new vis.DataSet([
            ]);

            var edges = new vis.DataSet([
            ]);
            var data = {
                nodes: nodes,
                edges: edges
            };  

            var options = {
                nodes: {
                    shape: 'dot',
                    scaling: {
                        min: 20,
                        max: 30,
                        label: {
                            min: 14,
                            max: 30,
                            drawThreshold: 9,
                            maxVisible: 20
                        }
                    },
                    font: {
                        size: 14,
                        face: 'Helvetica Neue, Helvetica, Arial',
                        color: "#999999"
                    }
                },
                groups: {
                    monkey_linux: {
                        shape: 'image',
                        image: "image/service.png"
                    },
                    island_monkey_linux: {
                        shape: 'image',
                        image: {
                            unselected: 'img/computer.png',
                            selected: 'img/internet.png'
                        }
                    }

                },
                interaction: {
                    hover: true,
                    hoverConnectedEdges: false,
                    selectConnectedEdges: true,
                },
                "edges": {
                    "smooth": {
                        "forceDirection": "none",
                        "roundness": 0.8
                    }
                },
                "physics": {
                    "forceAtlas2Based": {
                        "springLength": 100,
                        "gravitationalConstant": -20
                    },
                    "minVelocity": 0.75,
                    "solver": "forceAtlas2Based"
                }
            };        
            network = new vis.Network(dom.container, data, options);       
        },
        buildDemoData: function  (data) {
            var eMap = {},
                model = {},
                ret = [],
                models = data.edges;
            for (var i = 0; i < models.length; i++) {
                model = models[i];
                if (!eMap[model.to]) {
                    models[i].arrows = 'to';
                    models[i].width = 3;
                    if (models[i].group == "exploited") {
                        models[i].color = {
                            color: "rgb(204, 2, 0)"
                        }
                    } else if (models[i].group == "scan") {
                        models[i].color = {
                            color: "rgb(255, 153, 0)"
                        }
                    }
                    ret.push(models[i]);
                    eMap[model.to] = 1;
                }
            }
            return {
                nodes: data.nodes,
                edges: ret
            }
        },
        resetNetworkByJson: function  (data) {
            var obj = data;
            nodes = obj.nodes;
            edges = obj.edges;
            startpages = obj.startpages;
            network.setData({
                nodes: nodes,
                edges: edges
            });
        }               
    })

    var init = function () {
        myAction.initVis();
        var myData = myAction.buildDemoData(dataDemo);
        myAction.resetNetworkByJson(myData);
    }();
});	
</script>
</body>
</html>
